//准备一个变量来接全局的this，方便服用
//束缚this的是花括号(对象除外)
let that
//
class Tab{
  constructor(id) {
    //获取盒子
    this.box = document.querySelector(id)
    that = this

    //获取添加按钮
    this.addBtn = this.box.querySelector('.tabadd')
    this.addBtn.addEventListener('click',this.addTab)
    //获取ul
    this.ul = document.querySelector('.firstNav ul')
    //获取section的父级
    this.sectionFather=document.querySelector('.tabscon')
    //调用初始化事件，实现最初的绑定
     this.init()
  }
   //考虑到后面添加功能新增了li,也需要绑定点击事件，所以将li的绑定事件提取出来方便调用
   //初始化事件
  init() {
  //获取li的集合
    this.lis = this.box.querySelectorAll('.firstNav li')
    //获取删除图标
    this.dels = this.box.querySelectorAll('.firstNav li .iconfont')
    //给图标绑定删除事件
    this.dels.forEach((item) => {
      item.addEventListener('click',this.delTab)
    })
  //获取内容
  this.section=this.box.querySelectorAll('.tabscon section')
  this.lis.forEach((item, index) => {
  //给每一个li身上都挂一个index属性，把每一个item对应的索引一一赋值给对应li身上的index属性
    item.index = index
    item.addEventListener('click', this.toggleTabs)
  });
  }
  
  //封装排他思想函数
  clearTab() {
    this.lis.forEach(item => item.className = '')
    this.section.forEach(item => item.className = '')
  }

  //考虑到方便后期修改和复用，将匿名函数拿出来写成具名函数
  //1.切换功能
  toggleTabs() {
   that.clearTab()
    this.className = 'liactive'
    that.section[this.index].className='conactive'
  }
  //2.添加功能
  addTab() {
    //方法1：创建节点的方法
/*     const li=document.createElement('li')
    li.innerHTML=`<span>测试</span><span class="iconfont icon-guanbi"></span>`
    that.ul.appendChild(li) */

    //方法2:insertAdjacentHTML这个方法是将文本解析成element元素插到想要的地方
    //element.insertAdjacentHTML(position, text);
    //position有四个参数可以选(详见MDN官网)
    
    //调用排他函数
    that.clearTab()
    //每一次新增li和section都添加类名，让新增之后页面处于新增的那一行
    const li=` <li class="liactive"><span>测试</span><span class="iconfont icon-guanbi"></span></li>`
    const section=`<section class="conactive">测试</section>`
    that.ul.insertAdjacentHTML('beforeend', li)
    that.sectionFather.insertAdjacentHTML('beforeend', section)
    that.init()

  }

  //3.删除功能
  delTab(e) {
   //组织冒泡事件
    e.stopPropagation()
   //获取索引值
    const index = this.parentNode.index
    //删除对应的li
    this.parentNode.remove()
    //删除对应的section
    that.section[index].remove()
    //通过判断是否有类名，来判断是否删除的是选中的那个li
    if(that.box.querySelector('.liactive')) return
    
    if (index === that.lis.length - 1) {
      //用可选链式，判断前面有没有，有的话才模拟点击
      //不用可选链式的话，删到最后一个就会报错
      that.lis[index-1]?.click()
    } else {
      that.lis[index+1].click()
    }
    //调用初始化事件，因为删除之后，要重新渲染，要不然会导致已经删除的li还能被选中。
    that.init()
  }
}

new Tab('#tab')